<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>用户名：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.userName"
                        clearable
                        placeholder="用户名"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>昵称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        clearable
                        placeholder="昵称"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>机构：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.groupId"
                        filterable
                        clearable
                        placeholder="请选择机构"
                        remote
                        reserve-keyword
                        :remote-method="loadXx"
                        :loading="flag.schoolFlag"
                    >
                        <el-option
                            v-for="item in schools"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>状态：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.status"
                        clearable
                        placeholder="请选择状态"
                    >
                        <el-option label="审核中" value="review"></el-option>
                        <el-option label="通过" value="pass"></el-option>
                        <el-option label="未通过" value="fail"></el-option>
                        <el-option label="已解绑" value="unBind"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                    >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                    >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="warning"
                style="margin-bottom: 2em"
                icon="el-icon-check"
                :disabled="selectDisable"
                @click="batchLock('pass')"
                >批量通过
            </el-button>
            <el-button
                type="info"
                style="margin-bottom: 2em"
                icon="el-icon-close"
                :disabled="selectDisable"
                @click="batchLock('fail')"
                >批量拒绝
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="tableSelectionChange"
            >
                <el-table-column
                    type="selection"
                    width="55"
                    :selectable="checkSelect"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="header"
                    label="头像"
                    min-width="80"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-avatar :src="coverImage(scope.row.header)"
                            >{{ scope.row.name }}
                        </el-avatar>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="昵称（名字）"
                    width="200"
                ></el-table-column>
                <el-table-column
                    prop="userName"
                    label="用户名"
                    width="200"
                ></el-table-column>

                <el-table-column
                    prop="groupName"
                    label="机构"
                    min-width="100"
                ></el-table-column>
                <el-table-column prop="status" label="状态" min-width="100">
                    <template slot-scope="scope">
                        <k-tag :tag="groupUserStatus[scope.row.status]"></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="创建时间"
                    width="180"
                ></el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.status === 'review'"
                            class="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-check"
                            :loading="scope.row.opLoading"
                            @click="changeUserStatus(scope.row, 'pass')"
                            >通过
                        </el-button>
                        <el-button
                            v-if="scope.row.status === 'review'"
                            :loading="scope.row.opLoading"
                            class="warning"
                            size="mini"
                            type="text"
                            icon="el-icon-close"
                            @click="changeUserStatus(scope.row, 'fail')"
                            >拒绝
                        </el-button>

                        <el-button
                            v-if="!scope.row.edit"
                            type="text"
                            size="mini"
                            class="danger"
                            icon="el-icon-delete"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/user/group/re/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                            >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import Fetch from "@/api/request.js";
import { TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import { get, put, post } from "@/api/request";
import { unBindGroupAdmin } from "@/api/user";
import groupBindComponent from "@/views/models/vrs/group/groupBind";

export default {
    name: "GroupUserReList",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            queryData: {
                name: null,
                userName: null,
                mobile: "",
                groupId: null,
                orders: [
                    {
                        asc: true,
                        column: "status"
                    },
                    {
                        asc: false,
                        column: "created_time"
                    }
                ]
            },
            schools: [],
            flag: {
                schoolFlag: false
            }
        };
    },
    computed: {
        ...mapState({
            groupUserStatus: state => state.status.groupUserStatus
        })
    },
    watch: {},
    created() {
        this.loadXx();
    },
    mounted() {},
    methods: {
        search(queryData) {
            this.loadTable("/user/group/re/page", queryData);
        },
        checkSelect(row, index) {
            if ("review" === row.status) {
                return true;
            }
            return false;
        },
        async batchLock(status) {
            if ("fail" === status) {
                await this.$confirm("确定拒绝这些吗？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                });
            }

            post(`/user/group/re/change`, {
                ids: this.tableSelect,
                status
            }).then(res => {
                this.search();
            });
        },
        changeUserStatus(data, status) {
            data.opLoading = true;
            post(`/user/group/re/change`, { ids: data.id, status })
                .then(res => {
                    data.status = status;
                })
                .finally(() => {
                    data.opLoading = false;
                });
        },
        loadXx(query) {
            return this.flagPromise(
                get("/user/sys/group/list", {
                    name: query
                }).then(res => {
                    this.schools = res;
                    return res;
                }),
                "schoolFlag"
            );
        }
    }
};
</script>

<style lang="scss" scoped></style>
